﻿@model SuCasa.Models.CourseDetailViewModel

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="page-header">
    <h1>@Html.DisplayFor(model => model.CourseName)</h1>
    Instructor:@Model.Instructor
</div>

<div class="row" style="padding-top:20px;">
    
       
	  
    <h3>Students Enrolled</h3>
    
             @if (Model.Students != null)
        {
            <table class="table table-striped table-bordered students" style="">
                <thead>
                    <tr>
                        <th></th>
                        <th>
                            Name
                        </th>
                        <th>
                            Address
                        </th>
                        <th>
                            Home Phone
                        </th>
                        <th>
                            Cell Phone
                        </th>
                        <th>
                            Email
                        </th>
                    </tr>
                </thead>
                <tbody>

                    @foreach (var item in Model.Students)
                    {
                         <tr id="student-id-@item.MemberId">
                            <td>
                                
                                  @Ajax.ActionLink("Remove", "RemoveStudent", "Course",
                new { id = item.MemberId, courseId = Model.CourseId },
                new AjaxOptions
                {
                    HttpMethod = "POST",
                    Confirm = "Are you sure you want to delete this student?",
                    OnSuccess = "deleteConfirmation"
                })
                               
                            </td>
                             <td>
                                 @Html.ActionLink(@item.Name, "Details", "Member", new { id = item.MemberId}, null) 
                              
                            
                             </td>
                            <td>
                                @item.Address
                            </td>
                            <td>
                                @item.HomePhone
                            </td>
                            <td>
                                @item.CellPhone
                            </td>
                            <td>
                                @item.Email
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        }
        <div>
            @Html.ActionLink("Add Student", "AddStudentToCourse", "Course", new{id=Model.CourseId}, new { @class="btn btn-primary"} )
    </div>
</div>			
<p style="padding-top:30px;">
    @Html.ActionLink("Back to List", "List")
</p>

<script type="text/javascript">

    function deleteConfirmation(response, status, data) {

        // remove the row from the table
        var rowId = "#student-id-" + response.id;
        $('.students').find(rowId).remove();

        // display a status message with highlight
//        $('#actionMessage').text(response.message);
//        $('#actionMessage').effect("highlight", {}, 3000);
    }
    
</script>